<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>首页</title>

  <!-- 轮播图 -->
  <link rel="stylesheet" href="./bil/ByThePlugin/styles/slider.css">
  <!-- 自己的css -->
  <link rel="stylesheet" href="./css/common.css">
  <link rel="stylesheet" href="./css/index.css">

  <!-- js库 -->
  <script src="./bil/jquery-1.11.3/jquery.js"></script>

</head>

<body>
  <!-- 头部 -->
  <div id="head">
    <!-- 顶部导航-->
    <div class="topNav">
      <div class="container clearfix">
        <div class="topnav-url fl clearfix">
          <span>legochina.cn</span>
        </div>
        <!-- 登录注册 -->
        <div class="link-login fr">
          欢迎光临乐购,请<a class="register" href="#"> 登陆</a>\
          <a class="login" href="#">注册</a>
        </div>
      </div>
    </div>
    <!-- 购物车和我的订单 -->
    <div class="container clearfix">
      <div class="shop">
        <input class="search" type="text" placeholder="搜索">
        <span class="search-btn"></span>
        <span class="shopping-cart">
          <span class="shopping-logo"></span>
          <a href="#">购物车</a>
          <span>0</span>
        </span>
        <span class="my-order">
          <a href="#">我的订单</a>
        </span>
      </div>
      <!-- 导航 -->
      <div class="nav">
        <img src="./img/LOGO_02.jpg" alt="">
        <div class="content">
          <!-- 渲染的内容 -->
        </div>
      </div>
    </div>
  </div>

  <!-- 商品分类 -->
  <div class="container" id="goodsCategory">
    <div class="goods-category-content">
      <ul class="content">
        <!-- 渲染的内容 -->
      </ul>
    </div>
    <!--轮播开始-->
    <div class="goods-category-banner pptbox" id="bannerInner">
      <!--轮播的内容-->
      <ul class="innerwrapper">
        <li>
          <a href="#"><img src="./img/banner01.jpg" /></a>
        </li>
        <li>
          <a href="#"><img src="./img/banner02.jpg" /></a>
        </li>
        <li>
          <a href="#"><img src="./img/banner03.jpg" /></a>
        </li>
        <li>
          <a href="#"><img src="./img/banner04.jpg" /></a>
        </li>
        <li>
          <a href="#"><img src="./img/banner05.jpg" /></a>
        </li>
      </ul>
      <!--数字控制器-->
      <ul class="pagination controls">
        <li class="current"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
      <!--按钮控制器-->
      <span class="btnleft"></span>
      <span class="btnright"></span>
    </div>
  </div>

  <!-- 乐购·今日推荐 -->
  <div class="container" id="dailyRecommendation">
    <h2 class="title">乐购·今日推荐</h2>
    <div>
      <!-- 渲染内容 -->
      <table class="content clearfix">

      </table>
    </div>
  </div>

  <!-- 图书 电子书 -->
  <div class="container books " id="books">
    <div class="books-classify">
      <div class="books-title titlecss">
        <h2>图书 电子书</h2>
        <div class="books-rigth">
          <div class="on">最新上架</div>
          <div>独家畅销</div>
          <div>电子书</div>
        </div>
      </div>
      <div class="books-details">
        <div class="details-left">
          <img src="./img/index7_07.jpg" alt="">
          <ul>
            <li>中小学教辅</li>
            <li>外语</li>
            <li>考试</li>
            <li>小说</li>
            <li>文学</li>
            <li>青春文学</li>
            <li>成功\励志</li>
            <li>管理</li>
            <li>历史</li>
            <li>哲学\宗教</li>
            <li>亲子\家教</li>
            <li>全部分类&gt;</li>
          </ul>
        </div>
        <div class="details-right">
          <table>
            <tr>
              <td colspan="2">
                <!--轮播开始-->
                <div class="goods-category-banner pptbox" id="bannerInner2">
                  <!--轮播的内容-->
                  <ul class="innerwrapper">
                    <li>
                      <a href="#"><img src="./img/banner01.jpg" /></a>
                    </li>
                    <li>
                      <a href="#"><img src="./img/banner02.jpg" /></a>
                    </li>
                    <li>
                      <a href="#"><img src="./img/banner03.jpg" /></a>
                    </li>
                    <li>
                      <a href="#"><img src="./img/banner04.jpg" /></a>
                    </li>
                    <li>
                      <a href="#"><img src="./img/banner05.jpg" /></a>
                    </li>
                  </ul>
                  <!--数字控制器-->
                  <ul class="pagination controls">
                    <li class="current"></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                  </ul>
                  <!--按钮控制器-->
                  <span class="btnleft"></span>
                  <span class="btnright"></span>
                </div>
              </td>
              <td class="books-img">
                <h3>奥运狂欢</h3>
                <p>10万种电子书 直降40%</p>
                <p><img src="./img/index09_05.jpg" alt=""></p>
                <p><span>￥ 49</span><span>￥ 79</span></p>
              </td>
              <td class="books-img">
                <h3>奥运狂欢</h3>
                <p>10万种电子书 直降40%</p>
                <p><img src="./img/index09_05.jpg" alt=""></p>
                <p><span>￥ 49</span><span>￥ 79</span></p>
              </td>
            </tr>
            <tr>
              <td class="books-img">
                <h3>奥运狂欢</h3>
                <p>10万种电子书 直降40%</p>
                <p><img src="./img/index09_05.jpg" alt=""></p>
                <p><span>￥ 49</span><span>￥ 79</span></p>
              </td>
              <td class="books-img">
                <h3>奥运狂欢</h3>
                <p>10万种电子书 直降40%</p>
                <p><img src="./img/index09_05.jpg" alt=""></p>
                <p><span>￥ 49</span><span>￥ 79</span></p>
              </td>
              <td class="books-img">
                <h3>奥运狂欢</h3>
                <p>10万种电子书 直降40%</p>
                <p><img src="./img/index09_05.jpg" alt=""></p>
                <p><span>￥ 49</span><span>￥ 79</span></p>
              </td>
              <td class="books-img">
                <h3>奥运狂欢</h3>
                <p>10万种电子书 直降40%</p>
                <p><img src="./img/index09_05.jpg" alt=""></p>
                <p><span>￥ 49</span><span>￥ 79</span></p>
              </td>
            </tr>
          </table>
        </div>
      </div>
    </div>
    <div class="new-book">
      <h2>新书畅销榜</h2>
      <div class="content">
        <!-- 渲染内容 -->
      </div>
    </div>
  </div>

  <!-- 服装 -->
  <div class="container repetitio">
    <div class="repetitio-title titlecss">
      <h2>服装</h2>
      <div class="title-rigth">
        <div class="on">最新上架</div>
        <div>独家畅销</div>
        <div>电子书</div>
      </div>
    </div>
    <div class="repetitio-main">
      <div class="left">
        <img src="./img/index7_17.jpg" alt="">
        <ul>
          <li>中小学教辅</li>
          <li>外语</li>
          <li>考试</li>
          <li>小说</li>
          <li>文学</li>
          <li>青春文学</li>
          <li>成功\励志</li>
          <li>管理</li>
          <li>历史</li>
          <li>哲学\宗教</li>
          <li>亲子\家教</li>
          <li>全部分类&gt;</li>
        </ul>
      </div>
      <div class="repetitio-main-middle">
        <!--轮播开始-->
        <div class="goods-category-banner pptbox bannerInner3">
          <!--轮播的内容-->
          <ul class="innerwrapper">
            <li>
              <a href="#"><img src="./img/banner01.jpg" /></a>
            </li>
            <li>
              <a href="#"><img src="./img/banner02.jpg" /></a>
            </li>
            <li>
              <a href="#"><img src="./img/banner03.jpg" /></a>
            </li>
            <li>
              <a href="#"><img src="./img/banner04.jpg" /></a>
            </li>
            <li>
              <a href="#"><img src="./img/banner05.jpg" /></a>
            </li>
          </ul>
          <!--数字控制器-->
          <ul class="pagination controls">
            <li class="current"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
          </ul>
          <!--按钮控制器-->
          <span class="btnleft"></span>
          <span class="btnright"></span>
        </div>
        <img src="./img/index11_08_01.jpg" alt="">
      </div>
      <div class="repetitio-main-right shower">
        <div class="on">
          <span>1</span>
          <img class="fl" src="./img/index12_05.jpg" alt="">
          <img class="fl" src="./img/index12_05.jpg" alt="">
          <img class="fl" src="./img/index12_05.jpg" alt="">
        </div>
        <div>
          <span>2</span>
          <img class="fl" src="./img/index12_05.jpg" alt="">
          <img class="fl" src="./img/index12_05.jpg" alt="">
          <img class="fl" src="./img/index12_05.jpg" alt="">
        </div>
        <div>
          <span>3</span>
          <img class="fl" src="./img/index12_05.jpg" alt="">
          <img class="fl" src="./img/index12_05.jpg" alt="">
          <img class="fl" src="./img/index12_05.jpg" alt="">
        </div>
      </div>
    </div>
  </div>

  <!-- 童装童鞋婴儿装,户外运动 -->
  <div class="Childrens-wear">
    <!-- 渲染的内容 -->
  </div>

  <!-- 家居日用 -->
  <div class=" container" id="Household">
    <div>
      <h2 class="titlecss">家居日用</h2>
    </div>
    <div class="flexbetween household-main">
      <div>
        <img class="household-img" src="./img/index21_05.jpg" alt="">
      </div>
      <div>
        <table>
          <tr>
            <td><img src="./img/index22_05.jpg" alt=""></td>
            <td><img src="./img/index22_05.jpg" alt=""></td>
            <td><img src="./img/index22_05.jpg" alt=""></td>
            <td><img src="./img/index22_05.jpg" alt=""></td>
          </tr>
          <tr>
            <td><img src="./img/index23_08.jpg" alt=""></td>
            <td><img src="./img/index23_08.jpg" alt=""></td>
            <td><img src="./img/index23_08.jpg" alt=""></td>
            <td><img src="./img/index23_08.jpg" alt=""></td>
          </tr>
        </table>
      </div>
    </div>
  </div>

  <!-- 推广商品 -->
  <div class="container" id="promotionOfGoods">
    <div>
      <h3 class="titlecss">推广商品</h3>
    </div>
    <div class="promotion-content">
      <ul class="flexbetween content">
        <!-- 渲li -->
      </ul>
      <!-- 渲染ul -->
    </div>
  </div>

  <div id="ammm">

  </div>
  <!-- 楼层跳转 -->
  <div class="floor">
    <ul>
      <li data-bgc="#93d46f">图书</li>
      <li data-bgc="#f65727">服装</li>
      <li data-bgc="#ff7394">运动</li>
      <li data-bgc="#bb9dee">童装</li>
      <li data-bgc="#c2ec51">家居</li>
    </ul>
  </div>

  <!-- 尾部 -->
  <div id="footer">
    <div class="footer-nav">
      <div class="container service clearfix">
        <div class="fl genuine">
          <img src="./img/footer_03.jpg" alt="">
          <span>
            正规渠道正品保障
          </span>
        </div>
        <div class="fl">
          <img src="./img/footer_05.jpg" alt="">
          <span>
            放心购物货到付款
          </span>
        </div>
        <div class="fl">
          <img class="arrive" src="./img/footer_07.jpg" alt="">
          <span>
            625城市次日到达
          </span>
        </div>
        <div class="fl">
          <img src="./img/footer_09.jpg" alt="">
          <span>
            上门退货当面退款
          </span>
        </div>
      </div>
      <!-- 帮助 -->
      <div class="container">
        <div class="clearfix help">
          <!-- 购物指南 -->
          <ul class="shopping-guide fl">
            <li>
              <h4>购物指南</h4>
            </li>
            <li>
              <a href="#">购物流程</a>
            </li>
            <li>
              <a href="#">发票制度</a>
            </li>
            <li>
              <a href="#">账户管理</a>
            </li>
            <li>
              <a href="#">会员优惠</a>
            </li>
          </ul>
          <!-- 支付方式 -->
          <ul class="fl">
            <li>
              <h4>支付方式</h4>
            </li>
            <li>
              <a href="#">货到付款</a>
            </li>
            <li>
              <a href="#">网上支付</a>
            </li>
            <li>
              <a href="#">礼品卡支付</a>
            </li>
            <li>
              <a href="#">银行转帐</a>
            </li>
          </ul>
          <!-- 订单服务 -->
          <ul class="fl">
            <li>
              <h4>订单服务</h4>
            </li>
            <li>
              <a href="#">订单配送查询</a>
            </li>
            <li>
              <a href="#">订单状态说明</a>
            </li>
            <li>
              <a href="#">自助取消订单</a>
            </li>
            <li>
              <a href="#">自助修改订单</a>
            </li>
          </ul>
          <!-- 退换货 -->
          <ul class="fl">
            <li>
              <h4>退换货</h4>
            </li>
            <li>
              <a href="">退换货政策</a>
            </li>
            <li>
              <a href="">自助申请退换货</a>
            </li>
            <li>
              <a href="">退换货进度查询</a>
            </li>
            <li>
              <a href="">退款方式和时间</a>
            </li>
          </ul>
          <!-- 商家服务 -->
          <ul class="fl">
            <li>
              <h4>商家服务</h4>
            </li>
            <li>
              <a href="#">商家中心</a>
            </li>
            <li>
              <a href="#">运营服务</a>
            </li>
            <li>
              <a href="#">加入尾品汇</a>
            </li>
          </ul>
          <!-- 尾部logo -->
          <div class="footer_logo  fl">
            <img src="./img/logo_00.png" alt="">
          </div>
        </div>
      </div>
      <!-- 链接 -->
      <div class="copyright_links">
        <ul>
          <li>
            <a href="#">公司简介</a><span class="copyright_split">|</span>
          </li>
          <li>
            <a href="#">Investor Relations</a><span class="copyright_split">|</span>
          </li>
          <li>
            <a href="#">网站联盟</a><span class="copyright_split">|</span>
          </li>
          <li>
            <a href="#">乐购招商</a><span class="copyright_split">|</span>
          </li>
          <li>
            <a href="#">机构销售</a><span class="copyright_split">|</span>
          </li>
          <li>
            <a href="#">手机乐购</a><span class="copyright_split">|</span>
          </li>
          <li>
            <a href="#">官方Blog</a><span class="copyright_split">|</span>
          </li>
          <li>
            <a href="#">热词搜索</a>
          </li>
        </ul>
      </div>
      <!--  版权  -->
      <div class="copyright_cert">Copyright (C) 乐购网 2004-2016, All Rights Reserved</div>
    </div>
  </div>

  <!-- 轮播图 -->
  <script src="./bil/ByThePlugin/javascripts/slider.js"></script>

  <!-- 自己写的js -->
  <script src="./js/index.js"></script>

</body>

</html>